<template>
  <!-- 下月重点安排 -->

  <a-form-model ref="ruleForm" :model="nextmonthVO" :label-col="{ span: 6 }" :wrapper-col="{ span: 18 }">
    <!-- 表单 -->

    <title-name title="下月重要节点统计"></title-name>

    <s-table bordered ref="nextmonth" tableLayout="fixed" size="default" rowKey="code" :columns="nextmonthColumns" :data="loadData" :alert="true" show-size-changer show-quick-jumper :showPagination="false"> </s-table>
    <title-name class="mt12" title="下月策划执行管理工作安排"></title-name>
    <s-table
      bordered
      ref="nextmonthPlanning"
      tableLayout="fixed"
      size="default"
      rowKey="code"
      :columns="nextmonthPlanningColumns"
      :data="nextmonthPlanningData"
      :alert="true"
      show-size-changer
      show-quick-jumper
      :showPagination="false"
    >
      <template v-for="col in ['nextMonthWork']" :slot="col" slot-scope="text, record">
        <div :key="col" class="form-item">
          <BaseTextarea v-model="record[col]" :disabled="editModel == 0" :maxLength="1000" />
        </div>
      </template>
      <template slot="action" slot-scope="text, record">
        <a-popconfirm
          title="确定要删除?"
          @confirm="
            record.isDeleted = 1
            $refs.nextmonthPlanning.refresh()
          "
        >
          <a :disabled="editModel == 0 || record.status == 1">删除</a>
        </a-popconfirm>
      </template>
    </s-table>
    <!-- 页脚操作栏 -->
    <div class="btn_box tool-btns--fixed" style="bottom: 50px" v-if="editModel != 0">
      <a-button class="button_right" type="primary" @click="() => $emit('previousStep')">上一步</a-button>
      <a-button type="primary" @click="() => $emit('nextStep')">下一步</a-button>
    </div>
  </a-form-model>
</template>

<script>
import BaseEditPage from '@/views/baseEditPage' // 编辑详情页基础配置
import BSelect from '@/components/BComponents/BSelect'

import { nextmonthColumns, nextmonthPlanningColumns, colspan, colspanProjectName } from '../model.js'

export default {
  name: 'nodeCompletion',
  extends: new BaseEditPage(),
  components: {
    BSelect
  },

  data() {
    this.nextmonthColumns = nextmonthColumns
    this.nextmonthPlanningColumns = nextmonthPlanningColumns
    return {
      editModel: 1, // 操作状态:0 查看;1 编辑

      nextmonthVO: { nextmonthDTOList: [], nextplanworkDTOList: [] },

      loadData: () => {
        return new Promise((resolve, reject) => {
          resolve({
            data: this.nextmonthVO.nextmonthDTOList || []
          })
        })
      },
      nextmonthPlanningData: () => {
        return new Promise((resolve, reject) => {
          resolve({
            data: this.nextmonthVO.nextplanworkDTOList.filter(i=> !i.isDeleted) || []
          })
        })
      }
    }
  },
  props: {
    isAudit: {
      // 是否作为审批详情
      type: Boolean,
      default: false
    },
    form: {
      type: Object,
      default: {}
    }
  },
  watch: {
    isAudit: {
      immediate: true,
      handler(val) {
        if (val) {
          this.$nextTick(() => {
            this.editModel = 0
          })
        }
      }
    }
  },

  mounted() {
    this.nextmonthVO = this.form.nextmonthVO
    this.initColumns()
    this.$refs.nextmonthPlanning.refresh(true)
    this.$refs.nextmonth.refresh(true)
  },

  methods: {
    initColumns() {
      this.nextmonthColumns[1].customRender = (text, row, index) => {
        return colspan(text, row, index, this.nextmonthVO.nextmonthDTOList, 'projectName')
      }
      this.nextmonthColumns[2].customRender = (text, row, index) => {
        return colspanProjectName(text, row, index, this.nextmonthVO.nextmonthDTOList, 'projectName')
      }
      this.nextmonthPlanningColumns[1].customRender = (text, row, index) => {
        return colspan(text, row, index, this.nextmonthVO.nextplanworkDTOList, 'projectName')
      }
      this.nextmonthPlanningColumns[2].customRender = (text, row, index) => {
        return colspanProjectName(text, row, index, this.nextmonthVO.nextplanworkDTOList, 'projectName')
      }
    }
  }
}
</script>
<style lang="less" scoped>
/deep/ .form-item  {
  .ant-input:not([disabled]),
  .ant-select:not(.ant-select-disabled) .ant-select-selection,
  .ant-calendar-picker-input,
  .ant-input-number:not([disabled]),
  .ant-cascader-picker {
    border-color: #e4ac0b;

    background-color: #fff9e8;
  }
  .ant-input-disabled,
  .ant-input-number-disabled .ant-input-number-input,
  .ant-time-picker-input[disabled] {
    border-color: #d9d9d9 !important;
    background-color: #f5f5f5 !important;
  }

  .remark {
    .ant-input {
      border-color: inherit;
      background-color: initial;
    }
  }
}
</style>